<template>
  <div class="list-component">
        <el-form class="search-bar" :inline="true" :model="searchObj" >
          <el-form-item label="车辆名称">
            <el-input v-model="searchObj.name" placeholder="请输入车辆名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="small" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      <div class="list">
        <div class="button-bar">
          <el-button class="btn" type="primary" size="mini" icon="el-icon-plus"  @click="onAdd"  v-pms="'carEdit'">新建</el-button>
          <el-button class="btn" type="warning" size="mini" icon="el-icon-edit" @click="onEdit"  v-pms="'carEdit'">编辑</el-button>
          <el-button class="btn" type="danger" size="mini" icon="el-icon-delete" @click="onDelete"  v-pms="'carDelete'">删除</el-button>
        </div>
        <div class="data">
          <el-table   :data="listData.data"  ref="listData" @selection-change="selectChange" stripe  v-height="'auto'" >
              <el-table-column  type="selection"  align="center"   width="55"></el-table-column>
              <el-table-column type="index" label="序号" prop="index" align="center" width="60px" >
                  <div slot-scope="scope">
                      {{(listData.pageNum - 1) * listData.pageSize + 1 + scope.$index }}
                  </div>
              </el-table-column>
              <el-table-column label="车辆名称" prop="name" ></el-table-column>
          	<el-table-column label="车牌号" prop="code" ></el-table-column>
			<el-table-column label="车辆类型" prop="typeName" ></el-table-column>
          	<el-table-column label="责任人" prop="responsible" ></el-table-column>
              <el-table-column label="操作" prop="status" align="center" v-if="false">
                  <slot slot-scope="scope">
                      <el-button size="mini" @click="viewDetail(scope.row)">查看</el-button>
                  </slot>
              </el-table-column>
          </el-table>
        </div>
          <el-pagination 
			layout="prev, pager, next"
			 :current-page="listData.pageNum"
			 :page-size="listData.pageSize"
			 :total="listData.total"
			 @current-change="getList"
			 @prev-click="getList"
			 @next-click="getList"
          ></el-pagination>
      </div>
    <el-dialog :title="optType" :visible.sync="showDialog">
      <component v-bind:is="curComponent" @closeDialog="closeDialog" :initData="initData"  @refresh="refresh"></component>
    </el-dialog>
  </div>
</template>
<script>
import edit from "./car-edit.vue";
import Details from "./car-detail";
export default {
	props:{
		placeTypeList:[Array]
	},
  components: { edit, Details },
  data() {
    return {
		searchObj: {
		  name: ""
		},
      listData: {
        pageNum: 1, //页码
        pageSize:25,
        total: 5, //总共条数
        data: []
      },
      checked:[],//选择的列表
      optType: "编辑", //新增区划/编辑区划/导入/导出
      showDialog: false,
      curComponent: "edit", //Details，edit/导入/到处...
      initData:{},
	  approveStateList:[],
	  carTypeList:[]
    };
  },
  watch:{
    List:{
      handler(val){

      },deep:true
    },
    showDialog(val){
      if(!val){
        this.initData={}
        this.checked=[]
        this.$refs.listData.clearSelection();
      }
    }
  },
  methods: {
    getList(pageNum){
        var submitData={
            current:typeof pageNum=='number' ? pageNum : this.listData.pageNum,
            size:this.listData.pageSize,
            ...this.searchObj,
        };

        this.$http.carList(submitData)
        .then((res)=>{
            var data=res.data.data;
            this.$set(this.listData,'pageNum',data.current);
            this.$set(this.listData,'pageSize',data.size);
            this.$set(this.listData,'total',data.total);
            this.$set(this.listData,'data',this.transData(data.records))

        }).catch((err)=>{
            throw(err)
        })
    },
    //列表选择发生改变
      selectChange(val){
       this.checked = val;
      },
    refresh(){
      this.getList()
    },

    //添加车辆
    onAdd() {
      this.$refs.listData.clearSelection();
      this.optType = "新增";
      this.showDialog = true;
      this.curComponent=edit
      this.$nextTick(()=>{
        this.checked = [];
        this.initData=this.checked[0]
      })
    },

    //编辑车辆
    onEdit(index, row) {
      if (this.checked.length > 1) {
        this.$message.warning("只能选中一个");
        return;
      } else if (this.checked.length === 0) {
        this.$message.warning("请选中要编辑的车辆");
        return;
      }

      this.curComponent=edit
      this.optType = "编辑车辆";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=this.checked[0]
      })
    },
      viewDetail(rowData){
          this.curComponent = Details
          this.optType = "车辆详情";
          this.showDialog = true;
          this.$nextTick(()=>{
              this.initData = rowData
          })
      },
    //删除车辆
    onDelete() {
      if(this.checked.length===0){
        this.$message.warning("请选择要删除的车辆!")
        return
      }else if(this.checked.length > 1){
          this.$message.warning("请你选择一个进行删除!")
          return
      }
	  this.$confirm('请确认是否删除?', '警告', {
	     confirmButtonText: '确定',
	     cancelButtonText: '取消',
	     type: 'warning'
	   }).then(() => {
			var submitData={id:this.checked[0].id}
			this.$http.carDelete(submitData)
			.then(res => {
				this.getList(); //重新加载列表
			}).catch(err => {
			  throw ("delete接口报错：", err);
			});
	   })
    },

    //全选
    onSelectAll(selection) {
      this.checked = selection;
    },
    //选择
    onSelect(selection, row) {
      this.checked = selection;
    },

    closeDialog(bool) {
      this.showDialog = bool;
    },

    //查看详情
    showDetails(rowData){
      this.curComponent=Details
      this.optType = "查看详情";
      this.showDialog = true;
      this.$nextTick(()=>{
        this.initData=rowData.row
      })
    },

	transData(data){
		data.forEach((item)=>{
			this.carTypeList.forEach((item2)=>{
			  if(item2.id==item.type){
				  item.typeName=item2.name
			  }
			})
		})
		return data;
	},
	
	//获取车辆类型
	getCarTypeList(){
	    var submitData={parentCode:'carType'}
	    this.$http.getDictKeyList(submitData)
	    .then((res)=>{
	        var data=res.data.data ||[];
	        this.carTypeList=data
			this.getList();
	    }).catch((err)=>{
	        throw(err)
	    })
	},

  },
  created() {
	  this.getCarTypeList()
  }
};
</script>
